<template>
  <div class="custom-input-password" :style="style">
    <input
      type="text"
      class="form-control-password"
      :placeholder="placeholder"
      name="content"
      id="container"
      :disabled="disabled"
      :value="modelValue"
      @blur="handleBlur($event)"
      @focus="handleFocus"
      autocomplete="off"
    />
    <div class="input-suffix" :class="{ 'input-suffix-focus': inputFocus }">
      <span class="allow-clear-icon" @click="handleClear" v-if="allowClear && modelValue">
        <icon-close />
      </span>
      <span class="visible-eyes">
        <icon-eye-invisible v-if="!eyesShow" @click="handleToggle" />
        <icon-eye v-else @click="handleToggle" />
      </span>
    </div>
  </div>
</template>

<script setup>
  import { ref } from 'vue'
  const props = defineProps({
    modelValue: {
      type: String,
      default() {
        return ''
      },
    },
    placeholder: {
      type: String,
      default() {
        return '请输入'
      },
    },
    style: {
      type: Object,
      default() {
        return {}
      },
    },
    disabled: {
      type: Boolean,
      default() {
        return false
      },
    },
    allowClear: {
      type: Boolean,
      default() {
        return true
      },
    },
  })

  const emit = defineEmits(['update:modelValue', 'focus', 'blur', 'clear'])

  const inputFocus = ref(false)

  const eyesShow = ref(false)
  /**
   * 切换是否可视
   */
  const handleToggle = () => {
    eyesShow.value = !eyesShow.value
    let html = document.getElementById('container')
    let attribute = '-webkit-text-security'
    html.style[attribute] = eyesShow.value ? 'none' : 'disc'
  }

  /**
   * 获取焦点
   */
  const handleBlur = (e) => {
    inputFocus.value = false
    let value = e.target.value
    emit('update:modelValue', value)
    emit('blur', value)
  }

  /**
   * 失去焦点
   */
  const handleFocus = () => {
    inputFocus.value = true
    emit('focus')
  }

  /**
   * 清空内容
   */
  const handleClear = () => {
    emit('update:modelValue', '')
    emit('clear')
  }
</script>

<style lang="less" scoped>
  *,
  div,
  p {
    margin: 0;
    padding: 0;
  }
  .custom-input-password {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    position: relative;
    width: 300px;
    height: 32px;
    background: #f2f3f5;
    .input-placeholder {
      color: #86909c;
    }
    .form-control-password {
      width: 87%;
      height: 32px;
      -webkit-text-security: disc;
      background: #f2f3f5;
      border-radius: 2px 2px 2px 2px;
      opacity: 1;
      font-size: 14px;
      font-family: PingFang SC-Regular, PingFang SC;
      font-weight: 400;
      padding: 5px 12px;
      outline: none;
      z-index: 1000;
    }
    .form-control-password:focus {
      outline: none;
      border: 1px solid #448ef7;
      background: #ffffff;
      border-right: none;
      border-bottom-right-radius: 0;
      border-top-right-radius: 0;
    }
    .input-suffix {
      width: 13%;
      height: 32px;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      padding-right: 12px;
    }
    .input-suffix-focus {
      background: #ffffff;
      border: 1px solid #448ef7;
      border-left: none;
    }
    .allow-clear-icon {
      margin-right: 8px;
      cursor: pointer;
    }
    .visible-eyes {
    }
  }
</style>
